import { useState } from "react";
import "./App.scss";
import avatar from "./images/bozai.png";
import _ from "lodash";
import classNames from "classnames";
import { v4 as uuidV4 } from "uuid";
import dayjs from "dayjs";
import axios from "axios";

const list = [
  {
    rpid: 3,
    user: {
      uid: "13258165",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "周杰伦",
    },
    content: "哎哟，不错哦",
    ctime: "10-18 08: 15",
    like: 126,
  },
  {
    rpid: 2,
    user: {
      uid: "36080105",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "许嵩",
    },
    content: "我寻你千百度 日出到迟暮",
    ctime: "11-13 11: 29",
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: "30009257",
      avatar: "http://toutiao.itheima.net/resources/images/98.jpg",
      uname: "黑马前端",
    },
    content: "学前端就来黑马",
    ctime: "10-19 09: 00",
    like: 66,
  },
];

// 当前登录用户信息
const user = {
  // 用户id
  uid: "30009257",
  // 用户头像
  avatar,
  // 用户昵称
  uname: "黑马前端",
};
// 导航 Tab 数组
const tabs = [
  { type: "hot", text: "最热" },
  { type: "time", text: "最新" },
];

function App() {
  // 初始化数据列表
  const [dataList, setdataList] = useState(list);

  // 初始化type 实现tab高亮
  const [type, setType] = useState("hot");

  // 删除评论方法
  const delFn = (id) => {
    setdataList(dataList.filter((item) => item.rpid !== id));
  };

  // tab切换 一个是样式切换 一个是数据重新排序
  const changeTab = type => {
    console.log(type);
    setType(type)
    // 重新排序
    // 使用lodash库 
    // orderBy三个参数: 排序的数组  排序的属性  desc倒序 asc正序(默认)
    // 文档 https://www.lodashjs.com/docs/lodash.orderBy#_orderbycollection-iteratees_identity-orders
    type === 'hot' ? setdataList(_.orderBy(dataList , 'like' , 'desc')):setdataList(_.orderBy(dataList , 'ctime' , 'desc'))  
    

  }

  return (
    <div className="app">
      {/* 导航tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名： active */}
            {tabs.map((item) => (
              <span
                key={item.type}
                onClick={()=>changeTab(item.type)}
                // 设置两个类名 classNames
                className={classNames("nav-item", {
                  active: item.type === type,
                })}
              >
                {item.text}
              </span>
            ))}
          </li>
        </ul>
      </div>

      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text">发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {dataList.map((item) => (
            <div key={item.rpid} className="reply-item">
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img className="bili-avatar-img" src={item.user.avatar} />
                </div>
              </div>
              <div className="content-wrap">
                {/* 用户名 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  <div className="reply-info">
                    {/* 评论时间 */}
                    <span className="reply-time">{item.ctime}</span>
                    {/* 评论数量 */}
                    <span className="reply-time">点赞数:{item.like}</span>

                    {/* 
                    删除的需求:
                    只有自己的评论才显示删除
                    */}
                    {user.uid === item.user.uid && (
                      <span
                        onClick={() => delFn(item.rpid)}
                        className="delete-btn"
                      >
                        删除
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default App;
